var FixedApprovalForm = function () {
  var ApprovalFormModel = function (approval) {
    BaseModel.call(this);

    var self = this;
    var fn = {
      initData: function (approval) {
        if (approval === null) {
          self.type = '';
          self.deptId = '';
          self.users = [];
          return;
        }

        self.type = Number(approval.type);
        self.deptId = Number(approval.deptId);
        self.users = approval.approvalUserList;
      }
    };

    this.checkValid = function () {
      var fields = ['type', 'deptId', 'users'];
      for (var i = 0; i < fields.length; i++) {
        var field = fields[i];
        var value = this[field];
        if (SysUtil.isEmpty(value)) {
          return field;
        }
      }
      return '';
    };

    this.getObject = function () {
      var users = this.users;
      var userIds = _.map(users, 'id');

      var postData = {
        type: this.type,
        deptId: this.deptId,
        approverIds: userIds.join(',')
      };
      return postData;
    };

    fn.initData(approval)
  };

  var template = /* html */ `
    <div class="fixed-approval-form" v-loading.fullscreen.lock="loading">
      <div class="form-item clearfix">
        <div class="form-item-label">审批类型:</div>
        <div class="form-item-content">
          <span v-if="type!=='add'" style="line-height:32px">{{i18n.getMsg('attendance.approvalSetting.type.'+approval.type)}}</span>
          <el-select v-else v-model="approvalForm.type" size="small" style="width:200px">
            <el-option v-for="typeObj in typeList" :key="typeObj.value" :value="typeObj.value"
              :label="typeObj.label">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="form-item clearfix">
        <div class="form-item-label">部门:</div>
        <div class="form-item-content">
          <span v-if="type!=='add'" style="line-height:32px">{{approval.deptName}}</span>
          <el-select v-else filterable v-model="approvalForm.deptId" size="small" style="width:200px">
            <el-option v-for="dept in deptList" :key="dept.id" :value="dept.id" :label="dept.name">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="form-item clearfix">
        <div class="form-item-label">审核流程:</div>
        <div class="form-item-content">
          <el-button size="small" type="primary" @click="toSettingApproval">设置</el-button>
        </div>
      </div>
      <div class="form-item" style="padding-left:30px">
        <template v-for="(user,index) in approvalForm.users">
          <span :key="'user_'+user.id">{{user.name}}</span>
          <i v-if="index<approvalForm.users.length-1" :key="'arrow_'+user.id" class="el-icon-right"></i>
        </template>
      </div>

      <div style="text-align:center">
        <el-button size="small" type="primary" @click="ensure">
          <span v-if="type==='add'">新增</span>
          <span v-else>修改</span>
        </el-button>
      </div>

      <el-dialog append-to-body title="设置审批流程" :visible.sync="openDialog" width="540px" top="15vh">
        <div style="height:calc(70vh - 54px);overflow:auto">
          <approval-process-setting v-if="openDialog" :approval="approvalForm" :user-list="userList"
            @setting-success="settingSuccess">
          </approval-process-setting>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    props: {
      approval: {
        type: Object,
        default: function () {
          return null;
        }
      },
      type: {
        type: String,
        default: 'add'
      },
      deptList: {
        type: Array,
        default: function () {
          return [];
        }
      },
      dropdownOption: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        loading: false,
        typeList: i18n.getDropDown('attendance.approvalSetting.type', [1, 2, 3]),
        approvalForm: new ApprovalFormModel(this.approval),
        userList: [],
        openDialog: false
      };
    },

    created: function () {
      this.setUserList();
    },

    methods: {
      setUserList: function () {
        var dropdownOption = this.dropdownOption;
        var userList = dropdownOption.userList;
        if (userList !== undefined) {
          this.userList = userList;
          return;
        }

        this.loading = true;
        var self = this;
        ajaxRequest('user/queryAllUser').then(function (userList) {
          userList = _.map(userList, function (user) {
            return {
              id: user.id,
              name: user.userName
            };
          });
          self.userList = userList;
          dropdownOption.userList = userList;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      toSettingApproval: function () {
        this.openDialog = true;
      },

      settingSuccess: function () {
        this.openDialog = false;
      },

      ensure: function () {
        var approvalForm = this.approvalForm;
        var code = approvalForm.checkValid();
        if (code !== '') {
          var msg = i18n.getMsg(`attendance.approvalSetting.error.${code}`);
          this.$alert(msg, '信息');
          return;
        }

        if (this.type === 'add') {
          this.addApproval();
        } else {
          this.updateApproval();
        }
      },

      addApproval: function () {
        this.loading = true;
        var self = this;
        var approvalForm = this.approvalForm;
        ajaxRequest('dingTalk/queryApprovalProcessSetForUnite', {
          type: approvalForm.type,
          deptId: approvalForm.deptId
        }, false).then(function (res) {
          var approvalList = res.returnData;
          if (approvalList !== null) {
            self.loading = false;
            self.$alert('该审批流程已存在，不能再次添加', '信息');
            return;
          }

          return self.toSaveApproval(approvalForm).then(function () {
            self.loading = false;
            self.$alert('成功新增审批流程', '信息', {
              callback: function () {
                self.$emit('save-success');
              }
            });
          })
        }).catch(function () {
          self.loading = false;
        });
      },

      updateApproval: function () {
        this.loading = true;
        var self = this;
        self.toSaveApproval(this.approvalForm).then(function () {
          self.loading = false;
          self.$alert('成功修改审批流程', '信息', {
            callback: function () {
              self.$emit('save-success');
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      toSaveApproval: function (approvalForm) {
        var postData = approvalForm.getObject();
        return ajaxRequest('dingTalk/insertApprovalProcessSetForUnite', postData).then(function () {
          return true;
        });
      }
    },

    components: {
      ApprovalProcessSetting: ApprovalProcessSetting
    },

    template: template
  };
}();
